<template>
  <div class="problem">
    <div class="title">常见问题</div>
    <div class="desc">如果您在使用过程中有疑问，可以参考下面的常见问题，或拨打我们的服务电话: <span class="phone">010-83595020</span></div>
    <div class="list" :class="{active: active === item.id}" v-for="item in problemList" v-bind:key="item.id">
      <span class="label">问</span>
      <span class="title">{{ item.title }}</span>
      <div class="icon">+</div>
    </div>
    <div class="more"><a href="">更多常见问题</a></div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const problemList = ref([
      {
        title: '如何在线送检，流程是什么？',
        id: 1,
      },
      {
        title: '如何验证报告真伪？',
        id: 2,
      },
      {
        title: '设备使用费用是如何计算的？',
        id: 3,
      },
      {
        title: '如何查询当前进度？',
        id: 4,
      }
    ])
    return {
      problemList,
      active: 1
    }
  }
}
</script>

<style scoped lang="scss">
.problem{
  padding: dpi(11rem) 0;
  background-color: #f5f5f5;
  > .title{
    text-align: center;
    font-family: PingFangSC-Medium;
    font-size: dpi(3rem);
    line-height: dpi(4rem);
    color: #05204d;
  }
  > .desc{
    text-align: center;
    width: dpi(47rem);
    margin: dpi(5rem) auto dpi(8rem) auto;
    font-family: PingFangSC-Regular;
    font-size: dpi(2rem);
    line-height: dpi(3rem);
    color: #888888;
    .phone{
      color: #0571b0;
    }
  }

  .list{
    position: relative;
    display: flex;
    width: dpi(70rem);
    height: dpi(10rem);
    margin: 0 auto;
    &:not(&.active) {
      background-color: #ffffff;
    }
    &:not(&:last-child) {
      margin-bottom: dpi(3rem);
    }
    &.active{
      background-color: #05204d;
      .icon{
        color: #fff;
      }
      .title{
        color: #fff;
      }
    }
    .icon{
      flex: 0 0 dpi(8rem);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: MaterialIconsRound-Regular;
      font-size: dpi(3rem);
      color: #0571b0;
    }
    .label{
      display: flex;
      align-items: center;
      justify-content: center;
      width: dpi(8rem);
      flex: 0 0 dpi(8rem);
      height: 100%;
      font-size: dpi(3rem);
      color: #fff;
      background-color: #0571b0;
    }
    .title{
      flex: 1;
      display: flex;
      align-items: center;
      padding: 0 dpi(3rem) 0 dpi(5rem);
      font-family: PingFangSC-Medium;
      font-size: dpi(3rem);
      line-height: dpi(4rem);
      color: #05204d;
    }
  }
  .more{
    margin-top: dpi(7rem);
    text-align: center;
    a {
      font-size: dpi(2rem);
      color: #0571b0;
      text-decoration: none;
    }
  }
}
</style>